<template>
  <div>
    <IesTable
      :loading="iesTableLoading"
      :tableData="tableData"
      :theadData="theadData"
      :paginationOptions="paginationOptions"
      @tableSizeChange="tableSizeChange"
      @tableCurrentChange="tableCurrentChange"
      @tableSelectionChange="tableSelectionChange"
      @edit="edit"
      @del="del"
      @change="change"
      :tableIndexMethod="indexMethod"
      :pagination="false"
    />
  </div>
</template>

<script>
// 目的为了简化组件使用时的代码和统一风格
// pagination 默认true带分页组件 (注意 要传布尔类型的值 使用时属性绑定)
export default {
  data () {
    return {
      tableData: [],
      theadData: [
        {
          prop: 'selection',
          align: 'center'
        },
        {
          prop: 'index',
          label: '序号',
          align: 'center'
        },
        {
          prop: 'customerCode',
          label: '服务商代码',
          align: 'center'
        },
        {
          prop: 'serverChannelCode',
          label: '服务商渠道代码',
          align: 'center'
        },
        {
          prop: 'serverChannelNameCn',
          label: '中文名称',
          align: 'center'
        },
        {
          prop: 'serverChannelNameEn',
          label: '英文名称',
          align: 'center'
        },
        {
          prop: 'isActive',
          label: '生效状态',
          type: 'code',
          options: {
            true: '生效',
            false: '失效'
          },
          align: 'center'
        },
        {
          prop: 'customerAllname',
          label: '服务商名称',
          align: 'center'
        },
        {
          prop: 'isActives',
          label: '备注',
          align: 'center'
        },
        {
          prop: 'operation',
          label: '操作',
          align: 'center',
          width: '200px',
          options: {
            edit: false,
            delete: true,
            change: true
          }
        }
      ],
      iesTableLoading: false,
      paginationOptions: { // 分页属性
        current: 1, // 当前页
        count: 0, // 总页数后台返回的字段是pages
        size: 10, // 每页多少条
        total: 0, // 共多少条
        sizes: [10, 20, 30, 40]// 每页多少条
      },
      page: { // 请求分页列表接口的参数定义
        current: 1,
        size: 10
      }
    }
  },
  computed: {},
  created () {

  },
  methods: {
    tableSelectionChange (val) { // 多选 返回选中项val是数组同el-table的select
      console.log('val: ', val)
    },
    tableSizeChange (val) { // 切换每页显示多少条数据size
      this.page.current = 1// 重置当前页为第一页
      this.page.size = val
      // this.getlist()调列表接口
    },
    tableCurrentChange (val) { // 选页码
      this.page.current = val
      // this.getlist()调列表接口
    },
    edit (item) { // 点击编辑回调 返回当前行数据
      console.log('item: ', item)
      console.log('在此做编辑操作。。。')
    },
    del (item) { // 删除 返回当前行数据
      console.log('item: ', item)
      console.log('在此做删除操作。。。')
    },
    change (item) { // 状态切换 返回当前行数据
      console.log('item: ', item)
      console.log('在此做状态切换操作。。。')
    },
    indexMethod (index) { // 自定义index序号列表
      return index % 2 === 0 ? '双数' : '单数'
    },
    getlist () { // 分页接口请求demo
      this.iesTableLoading = true
      this.$api.table.list({ data: this.page }).then(res => {
        this.iesTableLoading = false
        this.tableData = res.datas
      }).catch(() => {
        this.iesTableLoading = false
      })
    }

  }
}
</script>

<style scoped lang="scss">
</style>
